<template>
  <ul class="detail-page">
    <!-- 顶部大图 -->
    <li class="banner-container" v-for="item in 10">
      <view class="banner">
        <image :src="product.image" mode="widthFix" />
      </view>
      <view class="banner-container">
        <!-- <text>{{ product.title }}</text> -->
        <view class="banner-img">
          <view class="banner-img-info">
            <p class="banner-img-info-price"><span class="banner-img-info-price-label">价格</span>￥10.99</p>
            <p class="banner-img-info-sold">已售3000</p>
          </view>
          <view>
          </view>
        </view>
        <view class="banner-title">
          <p class="banner-title-text">{{ product.title }}</p>
          <button class="banner-title-btn">商品100%好评</button>
        </view>
      </view>
    </li>
    <!-- 底部信息块 -->
    <!-- <view class="info-block">
      <view class="info-list">
        <view v-for="item in infoList" :key="item.label" class="info-item">
          <text class="label">{{ item.label }}</text>
          <text class="value">{{ item.value }}</text>
        </view>
      </view>
    </view> -->
  </ul>
</template>
<script>
export default {
  data() {
    return {
      productId: 0,
      allProducts: [
        {
          id: 1,
          title: '唐太医魔鬼瘦体体验包',
          image: '/static/list.png',
          price: 10.99,
          sold: 3000,
          merchant: '唐太医区域服务中心',
          rating: '100%'
        },
        {
          id: 2,
          title: '唐太医魔鬼瘦正装',
          image: '/static/list.png',
          price: 199.99,
          sold: 1500,
          merchant: '唐太医旗舰店',
          rating: '98%'
        },
        // …更多假数据
      ]
    }
  },
  computed: {
    // 获取当前商品
    product() {
      return (
        this.allProducts.find(p => p.id === this.productId) ||
        this.allProducts[0]
      )
    }
  },
  onLoad(options) {
    this.productId = parseInt(options.id, 10)
    console.log(options)
  }
}
</script>
<style scoped>
.detail-page {
  /* border: 1px solid red; */
  padding: 12px;
  background: #F5F5F5;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.banner {
  /* width: 430px; */
  height: 350px;
  /* border: 1px solid green; */
  z-index: 66;
}

.banner-container {
  margin-bottom: -30px;
}

.banner image {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
}

.banner-img {
  height: 84px;
  background-image: url('/static/shopimg.png');
  background-size: inherit;
  /* background-repeat: no-repeat; */
  background-position: inherit;
  transform: translateY(-82px);
  z-index: 3;
  /* position: s; */
  /* border: 1px solid blue; */
  display: flex;
  /* flex-direction: column; */
  align-items: center;
  /* justify-content: center; */
}

.banner-title {
  /* border: 1px solid red; */
  height: 87px;
  background-color: #FFFFFF;
  transform: translateY(-82px);
}

.banner-title-text {
  font-family: Source Han Sans CN;
  font-weight: 700;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  color: #1c1c1c;
  margin-left: 12px;
  margin-top: 12px;
}

.banner-title-btn {
  width: 102px;
  height: 20px;
  border-radius: 2px;
  border-width: 1px;
  background-color: #E3DAD1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 0%;
  outline: none;
  border: none;
  text-align: center;
  outline: none;
  margin: 12px 0 0 12px;
  padding: 0;
}

.banner-img-info {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: space-evenly;
  margin-left: 18px;
}

.banner-img-info>p {
  margin-top: 15px;
}

.banner-img-info-price {
  font-family: Source Han Sans CN;
  font-weight: 700;
  font-size: 18px;
  line-height: 100%;
  letter-spacing: 0%;
  color: #fff;
}

.banner-img-info-price-label {
  font-family: Source Han Sans CN;
  font-weight: 700;
  font-size: 22px;
  line-height: 100%;
  letter-spacing: 0%;
  color: #fff;
}

.banner-img-info-sold {
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 0%;
  color: #fff;
}

/* 下边 */
</style>